<template>
    <el-page-header title="产品管理" content="编辑产品" icon="" @back="handleBack()" />
    <el-form ref="productFormRef" :model="productForm" :rules="productFormRules" label-width="80px" class="demo-ruleForm" status-icon>
        <el-form-item label="产品名称" prop="title">
            <el-input v-model="productForm.title" auto-complete="off" placeholder="请输入产品名称" />
        </el-form-item>
        <el-form-item label="产品简要描述" prop="briefIntroduction">
            <el-input v-model="productForm.briefIntroduction"  placeholder="请输入产品简要描述" type="textarea" />
        </el-form-item>
        <el-form-item label="产品详细描述" prop="detailIntroduction">
            <el-input v-model="productForm.detailIntroduction"  placeholder="请输入产品详细描述" type="textarea" />
        </el-form-item>
        <el-form-item label="产品图片" prop="cover">
            <Upload :avatar="productForm.cover" @lennoxchange="handleUploadChange"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm()">更新新闻</el-button>
            <el-button type="warning" @click="handleBack()">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import { ElMessage } from 'element-plus'
import Upload from '../../components/upload/Upload.vue';
import upload from '../../util/upload'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router';

onMounted(() => {
    getProductData()
})

const getProductData = async () => {
    const res = await axios.get(`/adminapi/product/list/${route.params.id}`)
    Object.assign(productForm, res.data.data[0])
}

const router = useRouter()
const route = useRoute()
const productFormRef = ref()
const productForm = reactive({
    title: '',
    briefIntroduction: '',
    detailIntroduction: '',
    cover: '',
    file:null
})
const productFormRules = reactive({
    title: [
        { required: true, message: '请输入产品名称', trigger: 'blur' },
    ],
    briefIntroduction: [
        { required: true, message: '请输入产品简要描述', trigger: 'blur'},
    ],
    detailIntroduction: [
        { required: true, message: '请输入产品详细描述', trigger: 'blur'},
    ],
    cover: [
        { required: true, message: '请上传产品图片', trigger: 'blur'},
    ]
})
const handleUploadChange = (file) => {
    productForm.cover = URL.createObjectURL(file)
    productForm.file = file
}

const submitForm = () => {
    productFormRef.value.validate(async (valid) => {
        if (valid) {
            // console.log(productForm);
            const res = await upload('/adminapi/product/list', productForm)
            if (res.ActionType === "OK") {
                ElMessage({
                    message: '更新产品成功',
                    type: 'success',
                });
                router.back()
            } else {
                ElMessage({
                    message: '添加失败',
                    type: 'error',
                });
            }
        } else {
            console.log('error submit!!');
        }
    });
}

const handleBack = () => {
    router.back()
}
</script>

<style lang="scss" scoped>
.demo-ruleForm{
    margin-top: 50px;
}
</style>